<template>
  <div class="app-container">
  	<div class="filter-container">
  		<el-input :placeholder="$t('user.nickname')" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"/>

  		<el-button v-waves class="filter-item" type="primary" icon="el-icon-search">{{$t('table.search')}}</el-button>
  	</div>


  	<el-table
  	v-loading="listLoading"
  	:key="tableKey"
  	:data="list"
  	border
  	fit
  	highlight-current-row
  	style="width: 100%;"
    @sort-change="sortChange"
  	>
  	<el-table-column :label="$t('table.id')" prop="id" sortable="id" align="center" width="65">
  		<template slot-scope="scope">
  			<span>{{ scope.row.id }}</span>
  		</template>
  	</el-table-column>
  	<el-table-column :label="$t('user.nickname')" align="center">
  		<template slot-scope="scope">
  			<span>{{ scope.row.nickname }}</span>
  		</template>
  	</el-table-column>
  	<el-table-column :label="$t('user.avatar')" align="center">
  		<template slot-scope="scope">
  			<span>{{ scope.row.avatar }}</span>
  		</template>
  	</el-table-column>
  	<el-table-column :label="$t('user.gender')" prop="gender" sortable="gender" align="center">
  		<template slot-scope="scope">
  			<template v-for="(item,key) in genderOptions">
          <span v-if="item.value==scope.row.gender">{{ item.label }}</span>
        </template>
  		</template>
  	</el-table-column>
  	<el-table-column :label="$t('user.register_time')" prop="created_at" sortable="created_at" align="center">
  		<template slot-scope="scope">
  			<span>{{ scope.row.created_at }}</span>
  		</template>
  	</el-table-column>
  </el-table>

  <Pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

</div>
</template>

<script>

import { fetchList } from '@/api/user'
import waves from '@/directive/waves' // Waves directive
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
	components: { Pagination },
	directives: { waves },
	data() {
		return {
			tableKey: 0,
			list: null,
			total: 0,
			listLoading: false,
			listQuery: {
				page: 1,
				limit: 20,
				sort: '-id'
			},

      //selects
      genderOptions:[
      {label:'Unknown',value:0},
      {label:'Male',value:1},
      {label:'Female',value:2},
      ]
		}
	},
	created() {
		this.getList()
	},
	methods: {
	    getList() {
        helper.getList(fetchList, this)
	    },
      sortChange(data) {
        helper.handleSortChange(data,this)
      }
    },
}
</script>
